<template>
    <div class="user">
        <div class="header-top">
            <div class="user-con">
                <div class="left">
                    <img v-if="isImage"
                        src="https://img0.baidu.com/it/u=3321830095,2858211970&fm=253&fmt=auto&app=138&f=JPEG?w=438&h=500"
                        alt="">
                    <img v-if="!isImage" :src="userList.avatar" alt="">
                    <span>{{ userList.nickname }}</span>
                </div>
                <van-button @click="$router.push('/mySelf')" class="edit" type="default">编辑资料</van-button>
            </div>
            <div class="header-con">
                <div>
                    <span>1</span>
                    <p>头条</p>
                </div>
                <div>
                    <span>3</span>
                    <p>获赞</p>
                </div>
            </div>
        </div>
        <div class="ctrl">
            <div @click="$router.push('/coll')">
                <van-icon name="star-o" />
                <span>收藏</span>
            </div>
            <div>
                <van-icon name="clock-o" />
                <span>历史</span>
            </div>
        </div>
        <div class="setting">
            <span @click="$router.push('/changePassword')">修改密码
                <van-icon name="arrow" class="arrow" />
            </span>
            <span>联系我们
                <van-icon name="arrow" class="arrow" />
            </span>
            <span>关于我们
                <van-icon name="arrow" class="arrow" />
            </span>
        </div>

        <div class="btn" @click="isLogin">退出登录</div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { userNews } from '../request/api/user.js'
export default {
    data() {
        return {
            userList: [],
            isImage: true
        }
    },
    methods: {
        ...mapMutations(['changeIsshow', 'updataAuthor', 'updataAuthorid']),
        isLogin() {
            this.$router.push('/login');
            this.changeIsshow(false);
            localStorage.removeItem('token');
        }
    },
    async mounted() {
        let res = await userNews(localStorage.getItem('token'));
        this.userList = res.data.userInfo;
        console.log(res.data);
        if (res.data.msg == '获取用户信息成功') {
            this.isImage = false;
        }
        this.updataAuthor(res.data.userInfo.nickname);
        this.updataAuthorid(res.data.userInfo._id);
        localStorage.setItem('user_id', res.data.userInfo._id);
    }
}
</script>

<style lang="less" scoped>
.user {
    width: 100vw;
    height: 100vh;
    background: #e7e7e7;

    .header-top {
        width: 100%;
        height: 250px;
        background: url('https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');

        .user-con {
            width: 100%;
            height: 130px;
            display: flex;
            align-items: center;

            .edit {
                width: 100px;
                height: 30px;
                border-radius: 15px;
                border: none;
                margin-left: 50px;
            }

            .left {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;

                img {
                    width: 50px;
                    height: 50px;
                    margin: 0 40px;
                    background: #fff;
                    border-radius: 50%;
                }

                span {
                    color: #000000;
                    font-size: 15px;
                    font-weight: 1200;
                  
                }
            }
        }

        .header-con {
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
            margin-top: 20px;
            justify-content: space-around;
            text-align: center;
            color: #fff;

            p {
                line-height: 0px;
            }
        }

    }

    .ctrl {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #fff;

        div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    .setting {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        margin-top: 10px;

        span {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #e7e7e7;
        }

        .arrow {
            margin-left: 70%;
        }
    }

    .btn {
        width: 100%;
        height: 60px;
        background: #fff;
        margin-top: 10px;
        color: red;
        text-align: center;
        line-height: 60px;
    }
}
</style>